<?php 
$menu_height = 25;
?>

<style type="text/css">
.spliter {
  width: 2px;
  height: <?php echo $menu_height; ?>px;
}

.menu {
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: #825050;
  min-width: 90px;
  border: 1px solid #825050;
  border-bottom: 0;
  
}

.menu a {
  background-image: none !important;
  font-size: 14px;
  font-family: Arial,Helvetica,Sans-serif;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0;
}
.menu:hover {
  background-color: #D9D6CD;
  border: 1px solid #D9D6CD;
  border-bottom: 0;
}

.menu:hover a {
  color: #825050;
}


.hi {
//  background-image: none !important;
//  background-color: rgb(104, 171, 194);
  background-color: #D9D6CD;
  border: 1px solid #D9D6CD;
  border-bottom: 0;
}

.hi a {
  color: #825050;
}

.sub_menu {
}

.sub_div {
  height: <?php echo $menu_height; ?>px;
  line-height: <?php echo $menu_height - 5; ?>px;
  font-family: Trebuchet MS;
  font-size: 13px;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
  background-color: #e2d5d5;
  color: #825050;
  border-top: 1px solid #a66f6f;
  min-width: 70px;
  padding: 0 10px;
}
.sub_div td {
  color: #653D3D;
}
.sub_div:hover {
  background-image: url(<?php echo "exts/uis/$path/assets/imgs/bb.png"; ?>);
  background-repeat: repeat;
}
.sub_div:hover td {
  color: #fff;
}
.basemenu_mup {
  background-image: url(<?php echo "exts/uis/$path/assets/imgs/mup.png"; ?>);
  background-repeat: repeat-x;
  height: 5px;
}
.basemenu_mdown {
  background-image: url(<?php echo "exts/uis/$path/assets/imgs/mdown.png"; ?>);
  background-repeat: repeat-x;
  height: 5px;
}
</style>

<script type="text/javascript" src="<?php echo "libs/json/json2.js"; ?>"></script>
<script type="text/javascript" src="<?php echo "exts/uis/$path/assets/js/domutils.js"; ?>"></script>
<script type="text/javascript" src="<?php echo "exts/uis/$path/assets/js/popup.js"; ?>"></script>
<script type="text/javascript">
  <!--
    _mRoot = JSON.parse('<?php echo json_encode($mRoot); ?>');
    function showMore(m_id, elm) {
      var m = null;
      for (var idx in _mRoot.c) {
        var obj = _mRoot.c[idx];
        if (obj.id == m_id) {
          m = obj;
        }
      }
      
      if (m && m.c.length > 0) {
        sub1(m, elm);
      }
    }
      
    function sub1(node, elm) {
      var extn, div, p, pos, elm;
      
      p = new Popup();
      
      pos = DOMUtils.findPos(elm);
      div = document.createElement('div');
      div.style.cursor = 'pointer';
      div.style.width = elm.offsetWidth + 1 + 'px';
      div.style.height = elm.offsetHeight + 'px';
      div.style.position = 'absolute';
      div.style.top = pos[1] + 'px';
      div.style.left = pos[0] - 2 + 'px';
      div.onclick = function() {
        location.href = node.link;
      };
      p._bg.appendChild(div);
      
      extn = document.createElement('div');
      extn.className = 'sub_menu';
      extn.style.position = 'absolute';
      extn.style.top = pos[1] + 0 + elm.offsetHeight + 'px';
      extn.style.left = pos[0] - 1 + 'px';
      p._bg.appendChild(extn);
      for (var idx in node.c) {
        var obj = node.c[idx];
        div = document.createElement('div');
        div.className = 'sub_div';
        div.style.minWidth = elm.offsetWidth - 0 + 1 + 'px';
        var table, tr, td;
        table = document.createElement('table');
        table.style.width = '100%';
        tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        td.appendChild(document.createTextNode(obj.name));
        td = tr.insertCell(-1);
        td.style.verticalAlign = 'middle';
        td.style.textAlign = 'right';
        if (obj.c.length > 0) {
          td.appendChild(document.createTextNode('\u232a'));
        }
        div.appendChild(table);
        
        div._node = obj;
        div.onclick = function() {
          location.href = this._node.link;
        };
        extn.appendChild(div);
        
        div._node = obj;
        div._elm = div;
        div.onmouseover = function() {
          if (this._node.c.length > 0) {
            sub2(this._node, this._elm);
          }
        }
      }
      
      p._bg.onmousemove = function(ev) {
        ev = (ev) ? ev : window.event;
        var pos = DOMUtils.findPos(elm);
        if (!((ev.clientX >= pos[0] - 2
            && ev.clientX <= (pos[0] + elm.offsetWidth + 2)
            && ev.clientY >= pos[1]
            && ev.clientY <= (pos[1] + elm.offsetHeight))
            || (ev.clientX >= pos[0] - 2
            && ev.clientX <= (pos[0] + extn.offsetWidth + 2)
            && ev.clientY >= pos[1] + elm.offsetHeight
            && ev.clientY <= (pos[1] + elm.offsetHeight + extn.offsetHeight)))) {
          p._close();
        }
      };
    };
    
    function sub2(node, elm) {
      var extn, div, span, p, pos;
      
      p = new Popup();
      
      pos = DOMUtils.findPos(elm);
      div = document.createElement('div');
      div.className = 'sub_div';
      div.style.backgroundImage = 'url(<?php echo "exts/uis/$path/assets/imgs/bb.png"; ?>)';
      div.style.backgroundRepeat = 'repeat';
      div.style.color = '#fff';
      div.style.width = elm.offsetWidth - 18 + 'px';
      div.style.height = elm.offsetHeight - 0 + 'px';
      div.style.position = 'absolute';
      div.style.top = pos[1] + 'px';
      div.style.left = pos[0] + 'px';
      div.onclick = function() {
        location.href = node.link;
      };
      var table, tr, td;
      table = document.createElement('table');
      table.style.width = '100%';
      tr = table.insertRow(-1);
      td = tr.insertCell(-1);
      td.appendChild(document.createTextNode(node.name));
      td = tr.insertCell(-1);
      td.style.verticalAlign = 'top';
      td.style.textAlign = 'right';
      if (node.c.length > 0) {
        td.appendChild(document.createTextNode('\u232a'));
      }
      div.appendChild(table);
      p._bg.appendChild(div);
      
      extn = document.createElement('div');
      extn.className = 'sub_menu';
      extn.style.position = 'absolute';
      extn.style.top = pos[1] + 'px';
      extn.style.left = pos[0] + elm.offsetWidth + 2 + 'px';
      p._bg.appendChild(extn);
      for (var idx in node.c) {
        var obj = node.c[idx];
        div = document.createElement('div');
        div.className = 'sub_div';
        div.style.minWidth = elm.offsetWidth - 40 + 'px';
        div.style.height = elm.offsetHeight - 1 + 'px';
        var table, tr, td;
        table = document.createElement('table');
        table.style.width = '100%';
        tr = table.insertRow(-1);
        td = tr.insertCell(-1);
        td.appendChild(document.createTextNode(obj.name));
        td = tr.insertCell(-1);
        td.style.lineHeight = '15px';
        td.style.verticalAlign = 'top';
        td.style.textAlign = 'right';
        if (obj.c.length > 0) {
          td.appendChild(document.createTextNode('\u232a'));
        }
        div.appendChild(table);

        div._node = obj;
        div.onclick = function() {
          location.href = this._node.link;
        };
        extn.appendChild(div);
        
        div._node = obj;
        div._elm = div;
        div.onmouseover = function() {
          if (this._node.c.length > 0) {
            sub2(this._node, this._elm);
          }
        }
      }
      
      p._bg.onmousemove = function(ev) {
        ev = (ev) ? ev : window.event;
        var pos = DOMUtils.findPos(elm);
        if (!((ev.clientX >= pos[0]
            && ev.clientX <= (pos[0] + elm.offsetWidth)
            && ev.clientY >= pos[1]
            && ev.clientY <= (pos[1] + elm.offsetHeight))
            || (ev.clientX >= pos[0] + elm.offsetWidth
            && ev.clientX <= (pos[0] + elm.offsetWidth + extn.offsetWidth)
            && ev.clientY >= pos[1]
            && ev.clientY <= (pos[1] + extn.offsetHeight)))) {
          p._close();
        }
      };
    };
  // -->
</script>

<table cellPadding="0" cellSpacing="0">
  <tr>
  <?php
    foreach ($mRoot->c as $idx => &$m) {
      $menu_class = 'menu';
      if ($page_id == $m->id) {
        $menu_class .= ' hi';
      }
      echo "
        <td class=\"$menu_class\" onclick=\"location.href='$m->link'\" onmouseover=\"showMore('$m->id', this);\"><a href=\"$m->link\"><b>" . ($m->name) . "</b></a></td>
        <td class=\"spliter\"></td>
      ";
    }
  ?>
  </tr>
</table>
